<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/js/laydate5.3.1/theme/default/laydate.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css" type="text/css" media="all"/>

    <style>
        body{padding: 20px;}
        .demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}
        .demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
        .demo-footer a{padding: 0 5px; color: #01AAED;}
        .table-header-fixed {
            top: 0px;
            position: fixed;
            z-index: 999;
        }
        .table-height {
            padding-top: 17%;
        }
        .layui-form-item{
            clear: both;
        }
        .layui-table {
            width: 100%;
            margin: 0px 0;
            background-color: #fff;
            color: #666;
        }
        .layui-table-view {
            margin: 0px 0;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-inline" id="test6">
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" id="exports">导出</button>
            <button class="layui-btn layui-btn-warm" id="select">查询</button>
        </div>
    </div>
</div>
<table class="layui-table" id="test" >
</table>

<script src="/static/js/laydate5.3.1/laydate.js" charset="utf-8" type="text/javascript"></script>
<script src="/static/js/layui/layui.js" charset="utf-8" type="text/javascript"></script>
<script src="/static/js/jquery-3.6.0.min.js" charset="utf-8" type="text/javascript"></script>

<script>
    layui.use(['table','layer'], function(){
        // 加载提示
        var loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
        var table = layui.table;
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var year = date.getFullYear();
        month = (month.toString().length == 1) ? ("0"+month) : month;
        day = (day.toString().length == 1) ? ("0"+day) : day;
        var level = ${level!''};
        var startDate = year+'-01-01';
        var endDate = year+'-'+month+'-'+day;
        table.render({
            elem: '#test',
            method:'post',
            url: '/azbj/statisticalreports/info/bdlist',
            id:'tableId',
            even:true,
            cols:[
                [
                    {colspan:14,align:'center',title:'监狱安置帮教情况统计表'}
                ],
                [
                    {field: 'time',colspan:4,align:'left',
                        title:'   统计期间：    '
                    },
                    {colspan:10,align:'left',title:'数据指标统计(说明:当前系统项仅为系统上线使用后新录入数据情况统计)：'}
                ],
                [
                    {field:'childs',align:'center',rowspan:4,title:'各监狱',width:'120'},
                    {align:'center',colspan:1,title:'录入指标',width:'90'},
                    {align:'center',colspan:6,title:'核查指标'},
                    {align:'center',colspan:6,title:'衔接指标'}
                ],
                [
                    {field:'lrrs',colspan:1,title:'录入总人数',width:100,align: 'center'},
                    {field:'hczrs',colspan:1,title:'发起核查总人数',width:130,align: 'center'},
                    {field:'fqhcl',colspan:1,title:'发起核查率<br>（发起核查总人数÷录入总人数）',width:270,align: 'center'},
                    {field:'wchczrs',colspan:1,title:'完成核查总人数',width:130,align: 'center'},
                    {field:'wchcl',colspan:1,title:'完成核查率<br>（核查成功数÷发起核查总人数）',width:270,align: 'center'},
                    {field:'hccgs',colspan:1,title:'核查成功数',width:100,align: 'center'},
                    {field:'hccgl',colspan:1,title:'核查成功率<br>（核查成功数÷发起核查总人数）',width:240,align: 'center'},
                    {field:'xmsf',colspan:1,title:'刑满释放人数',width:120,align: 'center'},
                    {field:'zdxmsf',colspan:1,title:'重点刑满释放人数',width:150,align: 'center'},
                    {field:'xjzs',colspan:1,title:'衔接总人数',width:100,align: 'center'},
                    {field:'xjl',colspan:1,title:'衔接率<br>（衔接总人数÷刑满释放总人数）',width:240,align: 'center'},
                    {field:'zdbj',colspan:1,title:'重点帮教人数',width:120,align: 'center'},
                    {field:'zdbjl',colspan:1,title:'重点帮教衔接率<br>（重点帮教对象衔接人数÷重点帮教对象刑满释放总数）',width:380,align: 'center'},
                ],
                [
                    {align:'center',colspan:1,title:'人',width:100,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:130,align: 'center'},
                    {align:'center',colspan:1,title:'%',width: 270,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:130,align: 'center'},
                    {align:'center',colspan:1,title:'%',width:270,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:100,align: 'center'},
                    {align:'center',colspan:1,title:'%',width:240,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:120,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:150,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:100,align: 'center'},
                    {align:'center',colspan:1,title:'%',width:240,align: 'center'},
                    {align:'center',colspan:1,title:'人',width:120,align: 'center'},
                    {align:'center',colspan:1,title:'%',width:380,align: 'center'},
                ]
            ],
            done: function(res, curr, count) {
                //处理统计期间日期显示问题
                $(".layui-table-header").find("tr").eq(1).find("th").eq(0).find("div").text('   统计期间：'+$("#startDate").val()+' - '+$("#endDate").val());
                // 关闭提示层
                layer.close(loadingMsg);
                //处理单元格的高度
                // $(".layui-table-header").find("tr").eq(4).find("th").find("div").css("height", "auto");
                $(".layui-table-header").find("tr").eq(1).find("th").find("div").css("height", "auto");
                // $(".layui-table-header").find("tr").eq(1).find("th").eq(1).find("div").css("width", "100px");
                $(".layui-table-header").find("tr").eq(3).find("th").find("div").css("height", "auto");
                //处理复杂表头因为colspan=1而多出的列
                $(".layui-table-body").find("td").each(function (index, element) {
                    if ($(this).attr("data-field") >= 0) {
                        $(this).css("display", "none");
                    }
                });
                //设置单元格的边框
                $(".layui-table-header").find("tr").eq(1).find("th").eq(0).attr('style','border-right:none;padding-left:30px');
                if (level == 9) {
                    $(".layui-table-header").find("tr").eq(2).find("th").eq(0).find("div").text("各监狱");
                } else if (level == 1) {
                    $(".layui-table-header").find("tr").eq(2).find("th").eq(0).find("div").text("本监狱");
                }
                //处理复杂表头固定
                let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
                $(window).scroll(function () {
                    if ((headerTop - $(window).scrollTop()) < 20) { //超过了
                        $('.layui-table-header').addClass('table-header-fixed'); //添加样式，固定住表头
                        $('.layui-table-box').addClass('table-height');
                    } else { //没超过
                        $('.layui-table-header').removeClass('table-header-fixed'); //移除样式
                        $('.layui-table-box').removeClass('table-height'); //移除样式
                    }
                });
                //滚动body,header跟随滚动
                $('.layui-table-body').on('scroll', function (e) {
                    var leftPx = $(e.target).scrollLeft(); //获取表格body，滚动条距离左边的长度
                    var left = 'translateX(-' + leftPx + 'px)';
                    $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
                });
                bindButton();
            }
        });
        laydate.render({
            elem:'#test6',
            range: ['#startDate', '#endDate'],
            done: function (value) {
                var value = value;
                var data = value.split(" - ");
                startDate = data[0];
                endDate = data[1];
            },
        });
        laydate.render({
            elem:'#startDate',
            value: year+'-01-01'
        });
        laydate.render({
            elem:'#endDate',
            value: new Date()
        });

        //表格重载
        function reloadTable() {
            // 加载提示
            var loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0});
            table.reload('tableId', {
                url: '/azbj/statisticalreports/info/bdlist',
                method: 'post',
                where:{
                    'startDate':startDate,
                    'endDate':endDate
                },
                done: function () {
                    //处理统计期间日期显示问题
                    $(".layui-table-header").find("tr").eq(1).find("th").eq(0).find("div").text('   统计期间：'+$("#startDate").val()+' - '+$("#endDate").val());
                    laydate.render({
                        elem:'#test6',
                        range: ['#startDate', '#endDate'],
                        done: function (value) {
                            var value = value;
                            var data = value.split(" - ");
                            startDate = data[0];
                            endDate = data[1];
                        },
                    });
                    laydate.render({
                        elem:'#startDate',
                        value: startDate
                    });
                    laydate.render({
                        elem:'#endDate',
                        value: endDate
                    });
                    //处理单元格的高度
                    // $(".layui-table-header").find("tr").eq(4).find("th").find("div").css("height", "auto");
                    $(".layui-table-header").find("tr").eq(1).find("th").find("div").css("height", "auto");
                    // $(".layui-table-header").find("tr").eq(1).find("th").eq(1).find("div").css("width", "100px");
                    $(".layui-table-header").find("tr").eq(3).find("th").find("div").css("height", "auto");
                    //处理复杂表头因为colspan=1而多出的列
                    $(".layui-table-body").find("td").each(function (index, element) {
                        if ($(this).attr("data-field") >= 0) {
                            $(this).css("display", "none");
                        }
                    });
                    //设置单元格的边框
                    $(".layui-table-header").find("tr").eq(1).find("th").eq(0).attr('style','border-right:none;padding-left:3   0px');
                    if (level == 9) {
                        $(".layui-table-header").find("tr").eq(2).find("th").eq(0).find("div").text("各监狱");
                    } else if (level == 1) {
                        $(".layui-table-header").find("tr").eq(2).find("th").eq(0).find("div").text("本监狱");
                    }
                    //处理复杂表头固定
                    let headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离
                    $(window).scroll(function () {
                        if ((headerTop - $(window).scrollTop()) < 20) { //超过了
                            $('.layui-table-header').addClass('table-header-fixed'); //添加样式，固定住表头
                            $('.layui-table-box').addClass('table-height');
                        } else { //没超过
                            $('.layui-table-header').removeClass('table-header-fixed'); //移除样式
                            $('.layui-table-box').removeClass('table-height'); //移除样式
                        }
                    });
                    //滚动body,header跟随滚动
                    $('.layui-table-body').on('scroll', function (e) {
                        var leftPx = $(e.target).scrollLeft(); //获取表格body，滚动条距离左边的长度
                        var left = 'translateX(-' + leftPx + 'px)';
                        $('.layui-table-header .layui-table').css('transform', left); //设置表格header的内容反向(-)移动
                    });
                    layer.close(loadingMsg);
                    bindButton();
                },
            });
        }


        $("#exports").click(function () {
            if (startDate == undefined || endDate == undefined) {
                startDate == year + '-01-01';
                endDate == new Date();
            }
            top.location.href = encodeURI("/azbj/statisticalreports/exportExcelBdFile?startDate="+startDate+"&endDate="+endDate+"");
            reloadTable();
        });
        $("#select").click(function () {
            reloadTable();
        });
    });
</script>

</body>
</html>